<div class="content-wrapper" id="casemanage">
    	<div class="casemanage-banner">
    		<span class="casemanage-title">选择案件</span>
    		<!--<div class="close-icon" title="关闭" @click="hideAll()">
    		</div>-->
    		<!--<div class="casemanage-switch">
    			<div class="casemanage-block" :class="{active:showType==0}" @click="switchShowType(0)" title="切换为块状显示">
    				<i></i>
    			</div>
    			<div class="casemanage-list" :class="{active:showType==1}" @click="switchShowType(1)" title="切换为列表显示">	
    				<i></i>
    			</div>
    		</div>-->
    	</div>
        <div style="height:600px;overflow-y:scroll;" class="casemanage-body">
        	<div class="casemanage-buttonarea">
                <div class="case-key">关键字&nbsp;:&nbsp;</div>
        		<div class="casemanage-search">
	        		<input type="text" class="form-control case-pl" v-model="keyword" placeholder="搜索" />
					<i @click="search()"></i>
        		</div >
                <div class="case-chakey" @click="search()">查询</div>
        		<!--<div class="casemanage-add"  @click="add(0)">添加</div>-->
        	</div>
            <div class="case-content">

                <div class="cm-box-list" v-show="showType==0">
                    <div class="case-add" @click="add(0)"><div class="case-addimg"></div><div class="case-addcase">新增案件</div></div>
                    <div class="cm-box" v-for="(row,index) in page.rows" >
                        <div class="case-xianyi"></div>
                        <div class="case-infor" @click="choose(row)">
                            <div class="cm-box-header">{{row.case_name}}</div>
                            <div class="cm-box-body">
                                <span>案件类型：{{row.case_type | formatCaseType}}</span>
                                <span>案发时间：{{row.case_time | formatDate }}</span>
                                <span>案发辖区：{{row.case_region}}</span>
                                <!-- <span>案发辖区：{{row.case_region}}</span>
                                 <span>案发时间：{{row.case_time | formatDate }}</span>
                                 <span v-if="row.person_type">{{row.person_type}}：{{row.case_victim}}</span>
                                 <span>案件类型：{{row.case_type}}</span>-->
                                <!--<span>案件权限：{{row.case_authority | formatCaseAuthority}}</span>-->
                            </div>
                        </div>
                        <div :class="{'case-gogk':row.case_authority==0,'case-gosi':row.case_authority==1}">{{row.case_authority | formatCaseAuthority}}</div>
                        <div class="cm-box-footer" v-if="vid == row.create_id">
                            <i class="cm-box-edit" @click="handleEdit(index, row)"></i>
                            <!-- <i class="cm-box-del" @click="handleDelete(index, row)"></i> -->
                        </div>
                    </div>
                </div>
            </div>
            <el-table
                    row-class-name="tableRow"
                    ref="multipleTable"
                    :data="page.rows"
                    tooltip-effect="dark"
                    style="padding:0 30px;border-top:0;"
                    v-show="showType==1"
                    @row-dblclick="choose" 
                    @selection-change="handleSelectionChange">
                <el-table-column
                        width="70"
                        type="index"
                        label="序号">
                </el-table-column>
                <el-table-column
                        prop="case_uuid"
                        label="案件编号"
                        width="250">
                </el-table-column>
                <el-table-column
                        label="案件名称"
                        width="120">
                    <template slot-scope="scope">
                        <span :title="scope.row.case_name" class="overflow">{{ scope.row.case_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        width="120"
                        label="类型">
                    <template slot-scope="scope" >
                        <span>{{ scope.row.case_type}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="权限"
                        width="80">
                    <template slot-scope="scope" >
                        <span>{{ scope.row.case_authority | formatCaseAuthority  }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        width="170"
                        label="案件发生时间">
                    <template slot-scope="scope" v-if="scope.row.case_time">
                        <!--<i class="el-icon-time"></i>-->
                        <span >{{ scope.row.case_time | formatDate  }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        width="80"
                        prop="case_region"
                        label="辖区">
                </el-table-column>
                <el-table-column
                        width="100"
                        prop="case_victim"
                        label="案件人员">
                </el-table-column>
                <el-table-column
                        width="100"
                        prop="person_type"
                        label="人员类型">
                    <template slot-scope="scope" >
                        <span>{{ scope.row.person_type }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        width="120"
                        label="备注">
                    <template slot-scope="scope">
                        <span :title="scope.row.case_remark" class="overflow">{{ scope.row.case_remark }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        width="170"
                        prop="create_time"
                        label="创建时间">
                    <template slot-scope="scope" v-if="scope.row.create_time">
                       <!-- <i class="el-icon-time"></i>-->
                        <span>{{ scope.row.create_time | formatDate  }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        width="120"
                        label="操作">
                    <template slot-scope="scope" v-if="vid==scope.row.create_id">
                        <a style="cursor: pointer"
                           @click="handleEdit(scope.$index, scope.row)">编辑</a>
                        <a style="cursor: pointer"
                            @click="handleDelete(scope.$index, scope.row)">删除</a>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    :current-page.sync="currentPage"
                    :page-size="10"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="total, prev, pager, next"
                    :total="page.total"
                    v-show="showType==1"
                    style="padding: 2px 20px;border-top:0;">
            </el-pagination>
            <el-dialog
                    :title="dialogTitle"
                    :visible.sync="dialogVisible"
                    width="30%"
                    top="0"
                    center>

                <el-form ref="form" :model="caseManage" label-width="80px">
                	<el-form-item label="案发时间">
                        <el-date-picker
                                style="width:220px"
                                v-model="caseManage.case_time"
                                type="date"
                                placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="案发辖区">
                        <el-input v-model="caseManage.case_region"></el-input>
                    </el-form-item>
                    <el-form-item label="案件类型">
                        <el-select v-model="caseManage.case_type" placeholder="请选择案件类型">
                            <el-option v-for="item in typeList"
                                       :key="item.typeName"
                                       :label="item.typeName" :value="item.typeName"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="案件名称">
                        <el-input v-model="caseManage.case_name"></el-input>
                    </el-form-item>
                    <el-form-item label="人员类型" class="ball">
                        <el-select v-model="caseManage.person_type" placeholder="请选择人员类型">
                            <el-option v-for="item in personList"
                                       :key="item.personType"
                                       :label="item.personType" :value="item.personType"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="人员姓名" class="ball">
                        <el-input v-model="caseManage.case_victim" class="ball-l"></el-input>
                    </el-form-item>
                    <el-form-item label="案件权限">
                       <el-tooltip :content="tip" placement="top">-->
                            <el-switch
                                    v-model="caseManage.case_authority?true:false"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    active-value='0'
                                    @focus="focus"
                                    @change="changeswitch"
                                    inactive-value=1>
                            </el-switch>
                        </el-tooltip>
                    </el-form-item>

                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="caseManage.case_remark"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="update(1)">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
<div class="modal fade" id="loadingModal" aria-hidden=”true” data-backdrop=”static”>
    <div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px">
        <div class="progress progress-striped active" style="margin-bottom: 0;">
            <div class="progress-bar" style="width: 100%;"></div>
        </div>
        <h5 style="color:black"> <strong>正在删除案件...请稍等！</strong> </h5>
    </div>
</div>
    <script type="text/javascript">
        $(function () {
            $(".cm-box").mouseover(function () {
                $(this).find(".cm-box-edit").show()
            })
            $(".cm-box").mouseout(function () {
                $(this).find(".cm-box-edit").hide()
            })
        })
   		var storage = window.localStorage;
        function findDimensionsa() {
            //获取窗口高度
            let winHeight;
            if (window.innerHeight)
                winHeight = window.innerHeight;
            else if ((document.body) && (document.body.clientHeight))
                winHeight = document.body.clientHeight;
            $(".casemanage-body").css("height",(winHeight-200)+"px");
        }
        findDimensionsa();
        window.onresize=findDimensionsa;
        var vm=new Vue({
            el: '#casemanage',
            data:{
                vid:$("#vid").val(),
                page: {},
                dialogTitle:"",
                currentPage:1,
                typeList:[],
                personList:[],
                case_uuid: '',
                multipleSelection: [],
                dialogVisible: false,
                caseManage:{},
                keyword:'',
                showType:0,
                tip:"私有"
            },
            created:function () {
                this.getlist();
                this.getTypeList();
            },
            filters: {
                formatDate(time) {
                    var date = new Date(time);
                    return formatDate(date, 'yyyy-MM-dd');
                },
                formatCaseType(type) {
                    if(vm.typeList&&vm.typeList.length>0){
                        for( var i = 0; i <vm.typeList.length; i++){
                            if(vm.typeList[i].id==type){
                                return vm.typeList[i].typeName
                            }
                        }
                    }
                },
                formatCaseAuthority(case_authority){
                    switch (case_authority){
                        case 0: {
                            return "公开";
                        }
                        case 1: {
                            return "私有";
                        }
                        default:
                            return "";
                    }
                },
            },
            methods: {
                toggleSelection(rows) {
                    if (rows) {
                        rows.forEach(row => {
                            this.$refs.multipleTable.toggleRowSelection(row);
                        });
                    } else {
                        this.$refs.multipleTable.clearSelection();
                    }
                },
                handleSelectionChange(val) {
                    this.multipleSelection = val;
                },
                choose(row){
                	storage.setItem("refresh","yes");
                	let caseId = row.case_uuid;
                	request({
                         url: '${ctx}/casemanage/choose?caseId='+caseId,
                         method: 'post'
                     }).then(result=>{
                         if("${menuCode!}"=="Electronics"){
                            window.location.href="${ctx}home2?menuCode=${menuCode}&caseid="+caseId;
                        }else{
                            window.location.href="${ctx}home?menuCode=${menuCode}&menuCode2=${menuCode2}&caseid="+caseId;
                        }

                     })
                },
                getTypeList(){
                    request({
                        url: 'casetype/allcasetype',
                        method: 'get',
                    }).then(result=>{
                        this.typeList=result.data;
                        this.typeList.forEach(function(value,index,array){
                            array[index].id=value.id+''
                        })
                    })
                },
                getPersonList(){
                    request({
                        url: 'persontype/allpersontype',
                        method: 'get',
                    }).then(result=>{
                        this.personList=result.data;
                })
                },
                getlist(page=0,size=999){
                    request({
                        url: 'casemanage/search/'+page+'/'+size,
                        method: 'post',
                        data: {
                        	keyword:this.keyword
                        }
                    }).then(result=>{
                        //console.log(result.data.data)
                        this.page=result.data.data;
                    })
                },
                handleEdit(index, row) {
                    // this.dialogTitle="修改案件"
                    // request({
                    //     url: 'casemanage/'+row.id,
                    //     method: 'get',
                    // }).then(result=>{
                    //     if (result.data.flag){
                    //        this.dialogVisible=true;
                    //        this.caseManage=result.data.data;
                    //         console.log(this.caseManage);
                    //         this.getTypeList();
                    //         this.getPersonList();
                    //     }
                    // })
                    var d = top.dialog({
                        title : "修改案件",
                        modal : true,
                        url : '${ctx}/casemanage/caseManagePanel',
                        height : 600,
                        width : 1000,
                        data : row.id,
                        onshow : function () {
                        }
                    });
                    d.show();
                    return false;

                },
                handleDelete(index, row) {
                    this.$confirm('此操作将永久删除该案件和该案件下的所有数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $("#loadingModal").modal({backdrop: 'static', keyboard: false});
                        request({
                            url: 'casemanage/'+row.id,
                            method: 'delete',
                        }).then(result=>{
                            $('#loadingModal').modal('hide');
                            if (result.data.flag){
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                            }
                            this.getlist(this.currentPage-1,10)
                        })
                    });
                },
                handleSizeChange(val) {
                    console.log("每页"+val+"条")
                },
                handleCurrentChange(val) {
                    this.currentPage=val;
                    this.getlist(val-1,10)
                },
                search(){
                    this.getlist(0,10);
                },
                update(){
                    console.log(this.caseManage)
                    if (!this.caseManage.case_name) {
                        this.$message({
                            type: 'error',
                            message: '案件名字不能为空!'
                        });
                        return;
                    }
                    if (this.caseManage.case_authority){
                        this.caseManage.case_authority=0
                    }else{
                        this.caseManage.case_authority=1
                    }
                    if(this.caseManage.id){
                        request({
                            url: 'casemanage/'+this.caseManage.id,
                            method: 'PUT',
                            data: {
                                case_name:this.caseManage.case_name,
                                case_uuid:this.caseManage.case_uuid,
                                case_type:this.caseManage.case_type,
                                case_time:this.caseManage.case_time,
                                case_region:this.caseManage.case_region,
                                case_victim:this.caseManage.case_victim,
                                case_authority:this.caseManage.case_authority,
                                case_remark:this.caseManage.case_remark,
                                person_type:this.caseManage.person_type,
                            }
                        }).then(result=>{
                            if (result.data.flag){
                                this.caseManage={};
                                this.dialogVisible=false;
                                this.$message({
                                    type: 'success',
                                    message: '修改成功!'
                                });
                            }
                            this.getlist(this.currentPage-1,10)
                        })
                    }else{
                        request({
                            url: 'casemanage',
                            method: 'post',
                            data: {
                                case_name:this.caseManage.case_name,
                                case_uuid:this.caseManage.case_uuid,
                                case_type:this.caseManage.case_type,
                                case_time:this.caseManage.case_time,
                                case_region:this.caseManage.case_region,
                                case_victim:this.caseManage.case_victim,
                                case_authority:this.caseManage.case_authority,
                                case_remark:this.caseManage.case_remark,
                                person_type:this.caseManage.person_type,
                            }
                        }).then(result=>{
                            if (result.data.flag){
                                this.caseManage={};
                                this.dialogVisible=false;
                                this.$message({
                                    type: 'success',
                                    message: '增加成功!'
                                });
                            }
                            this.getlist(this.currentPage-1,10)
                        })
                    }

                },
                changeswitch(val){
                    this.tip=val?"公开":"私有"
                    this.caseManage.case_authority=val
                },
                add(val){
                	var pram={
                        	backUrl:"${ctx}home?menuCode=billanalysis&menuCode2=billimport&caseid="
                    };
                	if(menuCode=='billanalysis'){
                		pram.backUrl="${ctx}home?menuCode=billanalysis&menuCode2=billimport&caseid=";
                	}else if(menuCode=='callanalysis'){
                		pram.backUrl="${ctx}home?menuCode=callanalysis&menuCode2=phoneimport&caseid=";
                	}
                    var d = top.dialog({
                        title : "新增案件",
                        modal : true,
                        url : '${ctx}/casemanage/caseManagePanel',
                        height : 600,
                        width : 1000,
                        data : pram,
                        onshow : function () {
                        }
                    });
                    d.show();
                    return false;
                },
                hideAll(){
                	bootbox.hideAll();
                },
                switchShowType(index){
                	this.showType=index;
                }
            }
        })
    </script>
    <style>
        .cm-box-body span{
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
        }
        .cm-box-header{
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .cm-box-body {
            overflow: hidden;
            position: absolute;
            width: 200px;
        }
        .case-addcase {
            text-align: center;
            margin-top: 20px;
            font-size: 16px;
            color: #c3c3c4;
        }
        .case-addimg{
            background: url(${ctx}/imgs/case-tan/case-jia.png) no-repeat;
            width: 50px;
            height: 50px;
            margin-left: 125px;
            margin-top: 36px;
        }
        .case-add{
            width: 300px;
            height: 160px;
            background-color: #ffffff;
            border-radius: 4px;
            border: dashed 1px #e4e4e4;
            float: left;
            margin-left: 28px;
            cursor: pointer;
        }
        .casemanage-body{
            overflow-x: hidden;
            overflow-y: auto;
        }
        .modal-dialog.modal-lg{
            width: 1020px!important;
        }
        .case-gogk{
            background: url(${ctx}/imgs/case-tan/case-gk.png) no-repeat;
            width: 40px;
            height: 20px;
            color: #fff;
            margin-left: 259px;
            text-align: center;
        }
        .case-gosi{
            background: url(${ctx}/imgs/case-tan/case-sy.png) no-repeat;
            width: 40px;
            height: 20px;
            color: #fff;
            margin-left: 259px;
            text-align: center;
        }
        .case-infor{
            display: inline-block;
            width: 200px;
            margin-top: 30px;
            margin-left: 16px;
            position: absolute;
        }
        .case-xianyi{
            background: url(${ctx}/imgs/case-tan/case-xianyir.png) no-repeat;
            width: 52px;
            height: 52px;
            margin-top: 39px;
            margin-left: 20px;
            float: left;
        }
        .case-chakey{
            display: inline-block;
            width: 47px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: #287cdf;
            border-radius: 4px;
            color: #fff;
            margin-left: 10px;
            cursor: pointer;
        }
        .case-key{
            margin-left: 70px;
        }
        .case-pl::-webkit-input-placeholder{
            font-size: 12px;
            color: #bec0c7;
        }
        .casemanage-switch .casemanage-list {
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
             border-top-left-radius: 0;
             border-bottom-left-radius: 0;
        }
        .el-dialog--small{
            margin-top: 20px;
            width: 50%;
        }
        .el-form-item{
            margin-bottom: 10px;
        }
        .modal {
            background: rgba(0,0,0,0.75);
        }
    	.modal-body{
    		padding:0;
    	}
        .modal-content {
            border-radius: 10px 10px 0 0;
        }
        .content-wrapper{
            border-radius: 10px 10px 0 0;
        }
        .cm-box-header{
            background-color:transparent !important;
        }
        .casemanage-banner{
            height: 55px;
            border-bottom: 1px solid #EFEBEB;
            background-color:transparent !important;
            border-radius: 10px 10px 0 0;
        }
        .ball-d{
            width: 100%;
        }
    	.content-wrapper{
    		padding:0;
    	}
        .el-table .cell{
            height: 30px !important;
        }
        .el-table_1_column_1 .cell > div{
            width: 20px !important;
        }
        .casemanage-banner{
        	height: 60px;
        	width:100%;
        	background-color: #eef1fa;
        }
        .casemanage-title{
            float: left;
            font-size: 18px;
            line-height: 60px;
            text-align: center;
            margin-left: 30px;
            color: #000;
        }
        .casemanage-buttonarea{
			height:105px;
			line-height: 105px;
		}
		.casemanage-buttonarea .casemanage-search{
			display: inline-block;
            position: relative;
		}
        .case-key {
            display: inline-block;
        }
		.casemanage-buttonarea .casemanage-search input{
            width: 266px!important;
            height: 30px;
            background-color: #ffffff;
            border-radius: 4px;
            border: solid 1px #efebeb;
			margin-top: 10px;
			border-radius:4px;
			width: 265px;
		}
		.casemanage-buttonarea .casemanage-search i{
            background: url(${ctx}/imgs/case-tan/case-search.png) no-repeat;
		    display: block;
		    position: absolute;
		    top: 19px;
		    z-index: 99;
            right: 12px;
            cursor: pointer;
            width: 15px;
            height: 14px;
		}
        .casemanage-buttonarea .casemanage-add{
			width:80px;
			height:34px;
			display: block;
			float:right;
			color:#fff;
			background-color: #4595ec;
			border-radius: 4px;
			text-align: center;
			line-height: 34px;
			cursor: pointer;
		}
        .casemanage-buttonarea .casemanage-add:hover{
			background-color: #4595ec;
		}
		.v-modal{
			z-index: 0;
			display: none;
		}
		.close-icon{
		    width: 20px;
		    height: 20px;
		    background: url(${ctx}/imgs/case-tan/case-guan.png) no-repeat;
		    float: right;
            margin-top: 25px;
            margin-right: 17px;
		    cursor: pointer;
   		}

   		.cm-box-list{
            overflow: hidden;
	    }
	    .cm-box{
            width: 300px;
            height: 160px;
            background-color: #ffffff;
            border-radius: 2px;
            border: solid 1px #f2f2f2;
            float: left;
            margin-left: 28px;
            margin-bottom: 20px;
            cursor: pointer;
            position: relative;
            display: inline-block;
	    }
	    .cm-box-header{
	    	background-color:#eef1fa;
	    	width: 100%;
	    	font-size: 16px;
            color: #333;
	    }
	    .cm-box-body span{
	    	text-align: left;
	    	display: block;
	    	float: left;
	    	width: 100%;
	    	line-height: 24px;
	    }
	    .cm-box-footer{
	    	position:absolute;
	    	bottom:0;
	    	left:0;
	    	width:100%;
	    }
	    .cm-box-footer .cm-box-edit{
	    	float: right;
	    	margin-right:10px;
            margin-bottom: 10px;
	    	width:20px;
	    	height:20px;
	    	background: url(${ctx}/imgs/icon-edit.png);
            display: none;
	    }
        .cm-box-footer .cm-box-edit:hover{
            float: right;
            margin-right:10px;
            margin-bottom: 10px;
            width:20px;
            height:20px;
            background: url(${ctx}/imgs/icon-blueedit.png);
        }
	    .cm-box-footer .cm-box-del{
	    	float: right;
	    	margin-right:20px;
	    	width:20px;
	    	height:20px;
	    	margin-top:16px;
	    	background: url(${ctx}/imgs/icon-del.png)
	    }
        .cm-box-footer .cm-box-del:hover{
            float: right;
            margin-right:20px;
            width:20px;
            height:20px;
            margin-top:16px;
            background: url(${ctx}/imgs/icon-bluedel.png)
        }
        .el-button{
            margin-right: 0;
        }
        /*.el-picker-panel.el-date-picker{
            width: 388px !important
        }*/
        .ui-popup.ui-popup-modal.ui-popup-show.ui-popup-focus {
            z-index: 2060!important;
        }
    </style>
